<template>
  <div class="filter">
    <div class="search">
      <div class="item">
        <span class="left">邮箱:</span>
        <el-input
          v-model="searchCondition.email"
          placeholder="请输入邮箱"
        ></el-input>
      </div>

      <div class="item">
        <span class="left">真实姓名:</span>
        <el-input
          v-model="searchCondition.realName"
          placeholder="请输入真实姓名"
        ></el-input>
      </div>

      <div class="btn-area">
        <el-button type="primary" @click="handle('search')">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>

    <el-button
      type="success"
      icon="el-icon-plus"
      class="add-btn"
      @click="handle('add')"
      >添加</el-button
    >
  </div>
</template>

<script>
import { mixins } from "@/mixin/index";
export default {
  mixins: [mixins],
  components: {},
  data() {
    return {
      searchCondition: {
        email: "",
        realName: "",
      },
    };
  },
  methods: {
    handle(type) {
      this.$emit("handle", type, { ...this.searchCondition });
    },
    reset() {
      Object.keys(this.searchCondition).forEach(
        (key) => (this.searchCondition[key] = "")
      );
    },
  },

};
</script>
<style lang="scss" scoped>
.filter {
  padding: 20px 0 0 0;
  padding-top: 5px;
  //   display: flex;
  .search {
    display: flex;
    margin: 10px 0;
    .item {
      margin-right: 20px;

      .left {
        margin-right: 20px;
      }
    }
  }

  .el-input {
    width: 200px;
  }
}
.btn-area {
  display: flex;
}
</style>
